<template>
    <div class="none-scrollbar noselect" style="height: 100%">

        <div class="message connected" v-show="isConnected">
            已经连接到模型的主机零件 {{model && model.masterPart && model.masterPart.title}}
        </div>
        <div class="message disconnected" v-show="!isConnected">
            尚未连接到主机零件 {{model && model.masterPart && model.masterPart.title}}
        </div>

        <div v-show="isPart">
            <h3>零件：{{drawerTarget.title}}</h3>
            <div style="margin-top: 10px; " class="row item-center">
                <span style="width: 60px;">名称</span>
                <n-input v-model:value="drawerTarget.instanceName" style="flex:1" />
            </div>
        </div>

        <keep-alive>
            <component  :is="settingComponent" :target="drawerTarget" :model="model" />
        </keep-alive>

    </div>
</template>

<style scoped>
.el-drawer__wrapper{
    pointer-events:none
}
.el-drawer rtl {
    pointer-events: auto ;
}
.message{
    padding: 4px 10px;
    margin-bottom: 8px;
}
.message.connected {
    background-color: #e2ffe2;
    color: #69ab00;
}
.message.disconnected {
    background-color: #ffcccc;
    color: #790000;
}
</style>

<style>
.none-scrollbar .ivu-drawer-body::-webkit-scrollbar {
  width: 0;
}
</style>


<script lang="ts" setup>
import { ref, onMounted, Ref, watch, reactive, computed, markRaw} from 'vue'
// import SettingBeCoreXX from "./parts/BeCoreXX.vue"
import SettingBeServo from "./parts/BeServo.vue"
import SettingBeMotor from "./parts/BeMotor.vue"
import SettingBeLED from "./parts/BeLED.vue"
import SettingBeLEDRGB from "./parts/BeLEDRGB.vue"
import SettingBeSwitch from "./parts/BeSwitch.vue"
import SettingBeColorDetector from "./parts/BeColorDetector.vue"
import SettingBePoser from "./parts/BePoser.vue"
import SettingStud from "./stud/StudSetting.vue"
import SettingWire from "./Wire.vue"
import { AppModel } from '../../../model/AppModel';
import { EventEmitter } from '../../../base/events';
import { PartBase } from '../../../model/parts/PartBase';
import { ConnectionStatus } from '../@beshell/conn-ts/SocketBase';
import { conn } from '../@beshell/conn-ts/Connection';
import { Stud } from '../../../model/Stud';

const components: any = {
    Wire: markRaw(SettingWire),
    Stud: markRaw(SettingStud), 
    // BeCore16: markRaw(SettingBeCoreXX),
    // BeCore32: markRaw(SettingBeCoreXX),
    BeLED: markRaw(SettingBeLED),
    BeLEDRGB: markRaw(SettingBeLEDRGB),
    BeServo: markRaw(SettingBeServo),
    BeMotor: markRaw(SettingBeMotor),
    BeColorDetector: markRaw(SettingBeColorDetector),
    BeSwitch: markRaw(SettingBeSwitch),
    BePoser: markRaw(SettingBePoser),
}

defineExpose({setTarget})

const settingComponent = ref(null)
function updateSettingComponent () {
    settingComponent.value = components[drawerTarget.value.constructor.name]
}

    
let model: AppModel
const drawerTarget: Ref<any|null> = ref({})


const isPart = computed(()=>{
    return drawerTarget.value instanceof PartBase
})

const isConnected = ref(false)

onMounted(function () {
    conn.on("status", (status:string)=>{
        isConnected.value = status == ConnectionStatus.connected
    })
})

function setTarget(target: any) {
    if(!(target instanceof Stud) && !components[target.constructor.name] ) {
        console.log("SideSetting unknow target:", target.constructor.name, target)
        return
    }
    drawerTarget.value = target
    updateSettingComponent()
    return
}



</script>